<!-- 表格组件 -->
<script lang="tsx" setup>
import { ElMessage, type TableInstance } from 'element-plus';

import type { TableColumnOption } from '@/components/table-widget/table-widget.vue';
import {
  getEnumOptionsField,
  RISK_HAZARDS_SPECIAL_TASK_STATUS_OPTIONS,
  RISK_HAZARDS_SPECIAL_TASK_TYPE_OPTIONS,
} from '@/config/enum-options';
import type { components } from '@/genapi/wh';
import {
  whManagerBsTbRiskHazardsSpecialChangeTaskStatusUsingPost,
  whManagerBsTbRiskHazardsSpecialDeleteByIdIdUsingPost,
} from '@/genapi/wh';

import { injectState } from '../state';
import DetailDialog from './detail-dialog.vue';

defineOptions({ name: 'Sheet' });

const {
  page: { records, isLoading, execute },
} = injectState()!;

const detailDialogRef = shallowRef<InstanceType<typeof DetailDialog>>();

const tableRef = shallowRef<TableInstance>();

watch(records, () => tableRef.value?.clearSelection());

const onDelete = async (row: (typeof records.value)[0]) => {
  await ElMessageBox.confirm(
    `您即将删除【${row.handleDesc ?? '未知'}】，删除后不可恢复，是否确认删除？`,
    '提示',
    {
      type: 'error',
    },
  );
  await whManagerBsTbRiskHazardsSpecialDeleteByIdIdUsingPost({ path: { id: row.id! } });
  ElMessage.success('删除成功');
  await execute();
};

// const onChangeStatus = async (row: (typeof records.value)[0], status: any) => {
//   await whManagerBsTbRiskHazardsSpecialChangeTaskStatusUsingPost({
//     data: { id: row.id, taskStatus: status },
//   });
//   ElMessage.success('设置成功');
//   await execute();
// };

const options = [
  {
    value: '1',
    label: '待施工',
  },
  {
    value: '2',
    label: '施工中',
  },
  {
    value: '3',
    label: '已验收',
  }
]

const changeStatus = async (val,row) => {
  await whManagerBsTbRiskHazardsSpecialChangeTaskStatusUsingPost({
  id: row.id,
  taskStatus: val.value
})
  ElMessage.success('设置成功');
  await execute();
}

const columns: TableColumnOption<components['schemas']['TbRiskHazardsSpecialDuiXiang']>[] = [
  {
    label: '序号',
    type: 'index',
    fixed: 'left',
    width: 80,
  },
  {
    label: '作业类型',
    prop: 'taskType',
    formatter(row) {
      return getEnumOptionsField(
        RISK_HAZARDS_SPECIAL_TASK_TYPE_OPTIONS,
        'label',
        row.taskType,
        '-',
      );
    },
  },
  {
    label: '作业地点',
    prop: 'longitude',
    formatter(row){
      return (
        <div>经度{row.longitude}纬度{row.latitude}</div>
      )
    }
  },
  {
    label: '作业单位',
    prop: 'taskUnit',
  },
  {
    label: '上报时间',
    prop: 'reportTime',
  },
  {
    label: '实施时间',
    prop: 'handleTime',
  },
  {
    label: '作业负责人',
    prop: 'taskMaster',
  },
  {
    label: '验收人',
    prop: 'acceptance',
  },
  {
    label: '作业状态',
    prop: 'taskStatus',
    formatter(row) {
      return getEnumOptionsField(
        RISK_HAZARDS_SPECIAL_TASK_STATUS_OPTIONS,
        'label',
        row.taskStatus,
        '-',
      );
    },
  },
  {
    label: '操作',
    export: false,
    fixed: 'right',
    width: '200',
    formatter(row) {
      return (
        <>
          <el-button
            size="small"
            type="primary"
            text
            onClick={() => detailDialogRef.value?.trigger('detail', row)}
          >
            详情
          </el-button>
          <el-button
            size="small"
            type="primary"
            text
            onClick={() => detailDialogRef.value?.trigger('edit', row)}
          >
            编辑
          </el-button>
          <el-button size="small" type="primary" text onClick={() => onDelete(row)}>
            删除
          </el-button>
          <el-select
            placeholder="变更状态"
            size="small"
            style="width: 100px;"
          >
          { options.map(item => ( <el-option
                onClick={() => changeStatus(item,row)}
                key={item.value}
                label={item.label}
                value={item.value}
              />))}
          </el-select>
         
          {/* <el-dropdown onCommand={(e: any) => onChangeStatus(row, e) }>
            <span class="el-dropdown-link">
              变更状态
              <el-icon class="i-material-symbols:keyboard-arrow-down-rounded" />
            </span>
            {{
              dropdown: () => {
                return (
                  <el-dropdown-menu>
                    {RISK_HAZARDS_SPECIAL_TASK_STATUS_OPTIONS.map((item) => {
                      return <el-dropdown-item command={item.value}>{item.label}</el-dropdown-item>;
                    })}
                  </el-dropdown-menu>
                );
              },
            }}
          </el-dropdown> */}
        </>
      );
    },
  },
];
</script>

<template>
  <TableWidget v-loading="isLoading" :data="records" :columns="columns" h="100%!" />
  <DetailDialog ref="detailDialogRef" />
</template>
<style scoped>
.el-dropdown-menu {
z-index: 3000 !important;
}
</style>
